@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <form class="layui-form">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="card_number" placeholder="油卡卡号" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="card_status">
                            <option value="">请选择状态</option>
                            @foreach($status as $k => $v)
                                <option value="{{$k}}">{{$v}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn" id="searchBtn">搜 索</button>
                </div>
                <div class="layui-inline" style="margin-left: 20px; padding-top: 1px">
                    <div class="layui-btn-group">
                        @can('card.card.loss')
                            <button class="layui-btn layui-btn-danger" id="loss">已丢失</button>
                        @endcan
                        @can('card.card.enabled')
                            <button class="layui-btn" id="enabled">已收回</button>
                        @endcan
                    </div>
                    <div class="layui-btn-group">
                        @can('card.card.import')
                            <button class="layui-btn layui-btn-primary" id="import">导入</button>
                        @endcan
                        @can('card.card.export')
                            <button class="layui-btn layui-btn-primary" id="export">导出</button>
                        @endcan
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>

            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('card.card.loss')
                        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="loss">已丢失</a>
                    @endcan
                    @can('card.card.enabled')
                        <a class="layui-btn layui-btn-sm" lay-event="enabled">已收回</a>
                    @endcan
                </div>
            </script>
        </div>
    </div>
@endsection

@section('script')
    @can('card.card')
        <script>
            layui.use(['layer', 'table', 'form'], function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    , height: 500
                    , url: "{{ route('admin.card.data') }}" //数据接口
                    , page: true //开启分页
                    , cols: [[ //表头
                        {checkbox: true, fixed: true}
                        , {field: 'id', title: 'ID',  width: 60}
                        , {field: 'card_number', title: '卡号', width: 180}
                        , {field: 'check_code', title: '油卡验证码', width: 150}
                        , {field: 'allowance_total_fee', title: '已补贴金额(元)', width: 140}
                        , {
                            field: 'card_status', title: '油卡状态', width: 100, templet: function (d) {
                                if (d.card_status == 10) {
                                    return '空闲';
                                } else if (d.card_status == 20) {
                                    return '使用中';
                                } else {
                                    return '已丢失';
                                }
                            }
                        }
                        , {field: 'created_at', title: '创建时间', width: 160}
                        , {field: 'updated_at', title: '更新时间', width: 160}
                        , {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#options'}
                    ]]
                });

                // 搜索
                form.on('submit(searchBtn)', function (data) {
                    //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

                    var fields = data.field;
                    dataTable.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: fields // 搜索字段
                    });

                    return false; //阻止表单跳转
                });

                //监听工具条
                table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                    if (layEvent === 'loss') {
                        layer.confirm('确认已丢失吗？', function (index) {
                            $.post("{{ route('admin.card.loss') }}", {
                                ids: [data.id]
                            }, function (result) {
                                if (result.code == 0) {
                                    // 重新加载表格
                                    dataTable.reload();
                                }
                                layer.close(index);
                                layer.msg(result.msg, {icon: 6})
                            });
                        });
                    } else if (layEvent === 'enabled') {
                        layer.confirm('确认已收回吗？', function (index) {
                            $.post("{{ route('admin.card.enabled') }}", {
                                ids: [data.id]
                            }, function (result) {
                                if (result.code == 0) {
                                    // 重新加载表格
                                    dataTable.reload();
                                }
                                layer.close(index);
                                layer.msg(result.msg, {icon: 6})
                            });
                        });
                    }

                    return false;
                });

                //批量丢失
                $("#loss").click(function () {
                    var ids = [];
                    var hasCheck = table.checkStatus('dataTable');
                    var hasCheckData = hasCheck.data;
                    if (hasCheckData.length > 0) {
                        $.each(hasCheckData, function (index, element) {
                            ids.push(element.id)
                        })
                    }
                    if (ids.length > 0) {
                        layer.confirm('确认所选卡已丢失吗？', function (index) {
                            $.post("{{ route('admin.card.loss') }}", {
                                ids: ids
                            }, function (result) {
                                if (result.code == 0) {
                                    dataTable.reload();
                                }
                                layer.close(index);
                                layer.msg(result.msg, {icon: 6})
                            });
                        })
                    } else {
                        layer.msg('请选择已丢失项', {icon: 5})
                    }

                    return false;
                });

                //批量可用
                $("#enabled").click(function () {
                    var ids = [];
                    var hasCheck = table.checkStatus('dataTable');
                    var hasCheckData = hasCheck.data;
                    if (hasCheckData.length > 0) {
                        $.each(hasCheckData, function (index, element) {
                            ids.push(element.id)
                        })
                    }
                    if (ids.length > 0) {
                        layer.confirm('确认所选卡已收回吗？', function (index) {
                            $.post("{{ route('admin.card.enabled') }}", {
                                ids: ids
                            }, function (result) {
                                if (result.code == 0) {
                                    dataTable.reload();
                                }
                                layer.close(index);
                                layer.msg(result.msg, {icon: 6})
                            });
                        })
                    } else {
                        layer.msg('请选择已收回项', {icon: 5})
                    }

                    return false;
                })
            })
        </script>
    @endcan
@endsection